<template>
  <div class="collection">
    <el-tabs v-model="activeName">
      <el-tab-pane label="课程描述" name="first">
        <div v-html="classList.courseDetail"></div>
      </el-tab-pane>
      <el-tab-pane label="目录" name="second">
        <ul v-for="(i,index) in classList.sections" :key="index" class="classdirectory">
          <li>
            <p>{{ i.orderBy }}.{{ i.sectionName }}</p>
            <ul v-for="(item,index) in i.subSections" :key="index">
              <li>{{ i.orderBy }}-{{ index + 1 }} {{ item.sectionName }}</li>
            </ul>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="评论" name="third">
        <p>评论</p>
        <textarea placeholder="请发表您对课程的评价"
                  style="height: 140px;min-height: 140px;max-height: 140px;width: 1100px;min-width: 1100px;max-width: 1100px">
        </textarea> <br>
        <button>发表评论</button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "ClassPageMainBottom",
  data() {
    return {
      activeName: 'first',
    }
  },
  props: {
    classList: [Array, String, Object]
  }
}
</script>

<style scoped lang="less">
div.collection {
  overflow: hidden;
  padding: 20px;
  background-color: white;
  position: relative;
  margin-bottom: 20px;
}
textarea{
  outline: none;
  padding: 10px;
}
button{
  width: 120px;
  height: 35px;
  border: none;
  outline: none;
  color: white;
  background-color: #00cf8c;
  border-radius: 4px;
  font-size: 16px;
  float: right;
  margin: 10px 39px 0 0;
}
button:hover{
  opacity: 0.8;
}
ul{
  list-style: none;
}
.classdirectory{
  p{
    font-size: 22px;
  }
  ul{
    color: rgba(0,0,0,0.6);
    li{
      background-color: #f2f2f2;
      height: 30px;
      line-height: 30px;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
    }
    li:hover{
      color: #00cf8c;
    }
  }
}
</style>